@charset "UTF-8";
/**
 * 
 * @authors 3pixel (kermit@piexl.net)
 * @date    2017-11-22 11:47:01
 * @version v0.0.1
 */

//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";


.home{
	.wrapper{
		&.wrapper-fixed{
			max-width:1366px;
			@media screen and (max-width:1366px){padding-left:50px; padding-right:50px;}
			@media screen and (max-width:1024px){padding-left:30px; padding-right:30px;}
			@media screen and (max-width:768px){padding-left:30*@rpx; padding-right:30*@rpx;}
		}
	}
	//更多
	.more-link{
		display:inline-block;
		padding:0.8em 3em;
		font-size:18px;
		background-color:@red;
		color:rgba(255, 255, 255, 0.9);
		.border-radius(2em);
		@media screen and (max-width:1366px){font-size:16px; padding:0.6em 2.5em;}
		@media screen and (max-width:1024px){font-size:14px; padding:0.5em 2em;}
		&.more-link-o{
			border:2px solid @red;
			background-color:transparent;
			color:@red;
			&:hover{
				background-color:@red;
				color:#fff;
			}
		}
		&:hover{
			text-decoration:none;
			color:rgba(255, 255, 255, 1);
			background-color:darken(@red,3%);
		}
	}
	//区域头
	.sction-header{
		margin-bottom:60px;
		.sction-header-inner{
			display:inline-block;
		}
		span{
			display:inline-block;
			position:relative;
		}
		.icon-tip{
			top:0;
			font-family: 'FontAwesome';
			position:absolute;
			font-size:30px;
			line-height:1;
			color:#e0e0e0;
			@media screen and (max-width:480px){font-size:20px;}
			&.icon-tip-before{
				top:0;
				left:-1.5em;
			}
			&.icon-tip-after{
				top:0;
				right:-1.5em;
			}
		}
		.title{
			font-size:50px;
			color:#4f4f4f;
			font-weight:normal;
			margin-bottom:0.2em;
			line-height:1;
			@media screen and (max-width:1366px){font-size:46px;}
			@media screen and (max-width:1024px){font-size:40px;}
			@media screen and (max-width:480px){font-size:30px;}
		}
		.describe{
			font-size:20px;
			color:#5b5b5b;
			line-height:1.5;
			margin-bottom:0.2em;
			@media screen and (max-width:1366px){font-size:18px;}
			@media screen and (max-width:1024px){font-size:16px;}
			@media screen and (max-width:480px){font-size:14px;}
		}
	}
	//首屏广告
	.banner{
		width:100%;
		height:100%;
		.swiper-slide{
			background:#000 url(../images/example/home_banner1.jpg) no-repeat center center;
			background-size:cover;
			text-align:center;
			position:relative;
			a{
				display:block;
				width:100%;
				height:100%;
			}
			.mobile-img{
				width:100%;
				font-size:0;
				line-height:0;
				display:none;
			}
			.pc-title{
				position:absolute;
				top:50%;
				left:50%;
				.translate3d(-50%,-50%,0);
			}
		}
		.swiper-pagination{
			width:auto;
			left:inherit;
			right:60px;
			bottom:36px;
			.swiper-pagination-bullet{
				width:auto;
				height:auto;
				background-color:transparent;
				font-size:20px;
				font-weight:normal;
				font-family:'Conv_Oswald-Regular','Microsoft YaHei';
				color:#fff;
				opacity:1;
				margin-left:10px;
				margin-right:10px;
				.transition(all,0.5s,ease,0s);
				&.swiper-pagination-bullet-active{
					font-size:40px;
					&::after{
						content:'/';
						color:@red;
						padding-left:0.3em;
					}
				}
			}
		}
		.page-tip{
			color:#fff;
			position:absolute;
			bottom:30px;
			left:50%;
			z-index:9;
			text-align:center;
			.translate3d(-50%,0,0);
			.page-tip-inner{
				width:100%;
				height:100%;
				padding:10px;
				.border-radius(50%);
				background-color:@red;
				.animation_duration(2s);
			}
			i{
				font-size:26px;
				line-height:1;
				width:1em;
			}
		}
	}
	//舰队介绍
	.fleet{
		background-color:#181716;
		padding-top:75px;
		color:#fff;
		.fleet-inner{
			width:100%;
			max-width:940px;
			margin-left:auto;
			margin-right:auto;
			@media screen and (max-width:1024px){
				padding-left:30px;
				padding-right:30px;
			}
		}
		.video-box{
			width:50%;
		}
		.video-header{
			margin-bottom:40px;
			@media screen and (max-width:1366px){margin-bottom:30px;}
			@media screen and (max-width:1024px){margin-bottom:20px;}
			.small-title{
				font-size:25px;
				@media screen and (max-width:1366px){font-size:20px;}
				@media screen and (max-width:1024px){font-size:18px;}
			}
			.main-title{
				font-size:50px;
				line-height:1.2;
				@media screen and (max-width:1366px){font-size:40px;}
				@media screen and (max-width:1024px){font-size:36px;}
				@media screen and (max-width:768px){font-size:30px;}
			}
		}
		.video-container{
			margin-bottom:-30px;
		}
		.text-area{
			padding-left:40px;
			.translate3d(0,20%,0);
			.text-introduc{
				line-height:2;
				font-size:16px;
				margin-bottom:3em;
				@media screen and (max-width:1024px){font-size:14px;}
			}
			.link{
				color:@red;
				font-size:18px;
				&:hover{
					text-decoration:none;
				}
			}
		}
	}
	//目的地
	.destinations{
		padding-top:150px;
		padding-bottom:110px;
		@media screen and (max-width:1680px){padding:150px 50px 110px 50px;}
		@media screen and (max-width:1366px){padding:130px 40px 100px 40px;}
		@media screen and (max-width:1024px){padding:100px 30px 80px 30px;}
		@media screen and (max-width:480px){padding:100*@rpx 30*@rpx 80*@rpx 30*@rpx;}
		.destinations-list{
			@space:8px;
			margin-left:-@space;
			margin-right:-@space;
			margin-bottom:50px;
			@media screen and (max-width:1366px){margin-bottom:40px;}
			@media screen and (max-width:1024px){margin-bottom:30px;}
			.col-item{
				width:100%/4;
				.box-sizing(border-box);
				padding:0 @space;
				float:left;
				a{
					display:block;
					width:100%;
					font-size:0;
					line-height:0;
					margin-bottom:@space*2;
					position:relative;
					img{
						width:100%;
					}
					.title{
						display:block;
						position:absolute;
						right:0;
						top:0;
						padding:0.8em;
						width:2.6em;
						font-size:24px;
						line-height:1.1;
						color:#fff;
						text-align:center;
						background-color:rgba(0, 0, 0, 0.5);
						@media screen and (max-width:1680px){font-size:22px;}
						@media screen and (max-width:1366px){font-size:20px;}
						@media screen and (max-width:1024px){font-size:18px;}
						@media screen and (max-width:480px){font-size:14px;}
					}
					&::before{
						content:'';
						display:block;
						position:absolute;
						top:0;
						left:0;
						width:100%;
						height:100%;
						background-color:rgba(0, 0, 0, 0);
						.transition(all,0.5s,ease,0s);
					}
					&::after{
						content:'\f0c1';
						padding:0.8em;
						font-size:40px;
						line-height:1;
						background-color:rgba(212, 29, 25, 0.84);
						color:#fff;
						.border-radius(50%);
						position:absolute;
						top:50%;
						left:50%;
						opacity:0;
						font-family:'FontAwesome';
						.translate3d(-50%,-50%,0);
						.transition(all,0.5s,ease,0s);
						@media screen and (max-width:1680px){font-size:36px;}
						@media screen and (max-width:1366px){font-size:30px;}
						@media screen and (max-width:1024px){font-size:24px;}
					}
					&:hover{
						text-decoration:none;
						.title{
							opacity:0;
						}
						&::before{
							background-color:rgba(0, 0, 0, 0.4);
						}
						&::after{
							opacity:1;
						}
					}

				}
			}
		}
	}
	//体验
	.experience{
		padding-top:116px;
		padding-bottom:245px;
		background:url(../images/home_adventure_bg.jpg) no-repeat center bottom;
		@media screen and (max-width:1680px){padding-top:100px;}
		@media screen and (max-width:1366px){padding-top:90px;}
		@media screen and (max-width:1024px){padding-top:80px;}
		@media screen and (max-width:768px){
			padding-top:100*@rpx;
			padding-bottom:245*@rpx;
			background-size:200% auto;
		}
		.swiper-container{
			margin-bottom:73px;
			@media screen and (max-width:1024px){margin-bottom:50px;}
			@media screen and (max-width:768px){margin-bottom:73*@rpx;}
		}
		.swiper-slide{
			position:relative;
			height:auto;
		}
		.btn-icon{
			border:2px solid rgba(255, 255, 255, 0.9);
			padding:0.5em 1.5em;
			color:#fff;
			background-color:transparent;
			&:not(:last-child){
				margin-right:0.3em;
			}
			.border-radius(2em);
			i{
				font-size:24px;
				line-height:1;
				@media screen and (max-width:1366px){font-size:22px;}
			}
			&:hover,&.active{
				background-color:@red;
				color:#fff;
				border-color:@red;
			}
			&.btn-icon-blank{
				color:rgba(0, 0, 0, 0.9);
				border-color:rgba(0, 0, 0, 0.9);
				&:hover{
					color:rgba(0, 0, 0, 1);
					border-color:rgba(0, 0, 0, 1);
				}
			}
		}
		.item{
			display:block;
			line-height:0;
			font-size:0;
			width:100%;
			// img.item-face{max-width:none; width:100%;}
			&::before{
				position:absolute;
				top:0;
				left:0;
				content:'';
				display:block;
				width:100%;
				height:100%;
				background-color:rgba(0, 0, 0, 0.35);
			}
			.cover{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				font-size:16px;
				line-height:1.5;
				color:#fff;
				padding:2em 2em 0 2em;
				@media screen and (max-width:1366px){font-size:14px; padding:1.5em 1.5em 0 1.5em;}
				@media screen and (max-width:1024px){padding:1em 1em 0 1em;}
				@media screen and (max-width:768px){padding:2em 2em 0 2em;}
				.title{
					font-size:38px;
					line-height:1.2;
					font-weight:normal;
					@media screen and (max-width:1680px){font-size:32px;}
					@media screen and (max-width:1366px){font-size:30px;}
					@media screen and (max-width:1024px){font-size:24px;}
				}
				.athor{padding:0.5em 0;}
				.icon-video{
					padding:0.8em;
					text-align:center;
					font-size:20px;
					color:#515151;
					background-color:#fff;
					width:2.6em;
					.border-radius(50%);
					@media screen and (max-width:1680px){font-size:18px;}
					@media screen and (max-width:1366px){font-size:16px;}
					@media screen and (max-width:1024px){font-size:14px;}
				}
			}
			&:hover{
				text-decoration:none;
			}
			&.item-text{
				padding:4em 3em;
				height:100%;
				background-color:#f2f2f2;
				color:#000;
				font-size:14px;
				line-height: 2;
				@media screen and (max-width:1680px){padding:3em 2em;}
				@media screen and (max-width:1366px){padding:2.8em 1.4em;}
				@media screen and (max-width:1024px){padding:2em 1em;}
				@media screen and (max-width:768px){padding:3em 2em;}
				.item-header{
					margin-bottom:20px;
										@media screen and (max-width:1680px){margin-bottom:15px;}
					@media screen and (max-width:1366px){margin-bottom:10px;}
					@media screen and (max-width:1024px){margin-bottom:10px;}
					.avatar{
						border-radius:(50%);
						overflow:hidden;
						line-height:0;
						font-size:0;
						max-width:80px;
						@media screen and (max-width:1680px){max-width:80px;}
						@media screen and (max-width:1366px){max-width:70px;}
						@media screen and (max-width:1024px){max-width:60px;}
					}
					.author{
						max-width:10em;
						padding-left:0.5em;
						line-height:88px;
						font-size:24px;
						font-weight:normal;
						.text-overflow();
						font-weight:normal;
						@media screen and (max-width:1680px){font-size:18px; line-height:80px;}
						@media screen and (max-width:1366px){font-size:16px; line-height:70px;}
						@media screen and (max-width:1024px){font-size:14px; line-height:60px;}
					}
				}
				.intronation{
					@lineHeight:2em;
					color:#000;
					line-height:@lineHeight;
					.text-overflow-lines(5, @lineHeight);
					@media screen and (max-width:1680px){.text-overflow-lines(4, @lineHeight);}
					@media screen and (max-width:1366px){.text-overflow-lines(3, @lineHeight);}
					@media screen and (max-width:1024px){.text-overflow-lines(2, @lineHeight);}
					@media screen and (max-width:768px){.text-overflow-lines(5, @lineHeight);}
				}
			}
		}
		.cover-bottom{
			position:absolute;
			bottom:2em;
			right:2em;
			@media screen and (max-width:1366px){bottom:1.5em; right:1.5em;}
			@media screen and (max-width:1024px){bottom:1em; right:1em;}
		}
		.experience-button-next,.experience-button-prev{
			display:block;
			padding:1.4em 0.7em;
			border:0;
			background-color:rgba(0, 0, 0, 0.5);
			color:rgba(255, 255, 255, 0.9);
			i{
				font-size:46px;
				@media screen and (max-width:1680px){font-size:40px;}
				@media screen and (max-width:1366px){font-size:36px;}
				@media screen and (max-width:1024px){font-size:30px;}
				@media screen and (max-width:768px){font-size:24px;}
			}
			line-height:1;
			position:absolute;
			top:50%;
			z-index:9;
			cursor:pointer;
			text-align:center;
			margin-top:-2.4em;
			&:hover{
				background-color:@red;
			}
			&.swiper-button-disabled{
				display:none;
			}
		}
		.experience-button-prev{
			left:0;
		}
		.experience-button-next{
			right:0;
		}
	}
	//品牌
	.brand{
		padding-top:120px;
		padding-bottom:120px;
		&.wrapper.wrapper-fixed{
			max-width:1140px;
		}
		.contact-info{
			width:100%;
			max-width:266px;
			@media screen and (max-width:1280px){max-width:245px;}
			@media screen and (max-width:1024px){max-width:220px;}
			@media screen and (max-width:992px){float:none; margin-left:auto; margin-right:auto; margin-bottom:40px;}
			.logo{display:inline-block; font-size:0; line-height:0;}
			.title{
				font-size:40px;
				line-height:1.1;
				padding:24px 0;
				font-weight:normal;
				span{
					font-size:34px;
					@media screen and (max-width:1280px){font-size:30px;}
					@media screen and (max-width:1024px){font-size:26px;}
					@media screen and (max-width:768px){font-size:18px;}
				}
				b{font-weight:bold;}
				@media screen and (max-width:1280px){font-size:36px;}
				@media screen and (max-width:1024px){font-size:30px; padding:20px 0;}
			}
			.phone{
				display:block;
				font-size:36px;
				color:#7f7f7f;
				margin-bottom:0.5em;
				font-weight:bold;
				font-family: 'Conv_Oswald-Regular', 'Microsoft YaHei';
				@media screen and (max-width:1280px){font-size:30px;}
				@media screen and (max-width:1280px){font-size:28px;}
				&::before{
					content:"\e60d";
					line-height:1;
					display:inline-block;
					padding-right:0.3em;
					font-family: "iconfont" !important;
				}
				&:hover{
					text-decoration:none;
					color:darken(#7f7f7f, 10%);
				}
			}
			.content-btn{
				cursor:pointer;
				display:block;
				width:90%;
				margin-left:auto;
				margin-right:auto;
				padding:0.6em 1.5em;
				line-height:1;
				font-size:24px;
				color:rgba(255, 255, 255, 0.9);
				background-color:@red;
				@media screen and (max-width:1280px){font-size:22px;}
				@media screen and (max-width:1024px){font-size:20px;}
				&:hover{
					text-decoration:none;
					color:rgba(255, 255, 255, 1);

				}
			}
			.tip-text{
				font-size:16px;
				padding-top:0.8em;
				color:#000;
				@media screen and (max-width:1280px){font-size:14px; padding-top:0.5em;}
			}
		}
		.swiper-box{
			width:100%;
			max-width:679px;
			@media screen and (max-width:1280px){max-width:600px;}
			@media screen and (max-width:1024px){max-width:580px;}
			@media screen and (max-width:992px){max-width:100%; float:none;}
			.download-link{
				position:relative;
				display:block;
				font-size:0;
				line-height:0;
				.transition(all,0.5s,ease,0s);
				&::before{
					position:absolute;
					top:0;
					left:0;
					z-index:8;
					content:'';
					display:block;
					width:100%;
					height:100%;
					background-color:rgba(0, 0, 0, 0.4);
					opacity:0;
					.transition(all,0.5s,ease,0s);
				}
				&::after{
					position:absolute;
					top:50%;
					left:50%;
					z-index:8;
					content:'\e614';
					display:block;
					font-size:30px;
					line-height:1;
					font-family:'iconfont';
					.translate3d(-50%,-50%,0);
					padding:0.8em;
					background-color:@red;
					.border-radius(50%);
					color:#fff;
					opacity:0;
					.transition(all,0.5s,ease,0s);
				}
				&:hover{
					.translate3d(0,-10%,0);
					.box-shadow(10px 10px 0 #e4e4e4);
					&::before{opacity:1;}
					&::after{opacity:1;}
				}
			}
			// .swiper-slide-active{
			// 	.download-link{
			// 		.translate3d(0,-10%,0);
			// 		.box-shadow(10px 10px 0 #e4e4e4);
			// 		&::before{opacity:1;}
			// 		&::after{opacity:1;}
			// 	}
			// }
			.swiper-container{
				padding-top:32px;
				padding-bottom:60px;
				@media screen and (max-width:1280px){padding-top:26px; padding-bottom:50px;}
			}
			.swiper-pagination{
				.swiper-pagination-bullet{
					width: 9px;
					height: 9px;
					&.swiper-pagination-bullet-active{
						background-color:@red;
					}
				}
			}
		}
	}
}

@media screen and (max-width:1024px){
.home{
	.banner{
		.swiper-pagination{
			right:40px;
			bottom:20px;
			.swiper-pagination-bullet{
				font-size:14px;
				&.swiper-pagination-bullet-active{
					font-size:28px;
				}
			}
		}
	}
}
}

@media screen and (max-width:992px){
.home{
	//舰队介绍
	.fleet{
		padding-top:50px;
		.fleet-inner{
			padding-left:20px;
			padding-right:20px;
		}
		.video-box{
			width:46%;
		}
		.text-area{
			padding-left:20px;
			padding-top:10px;
			.translate3d(0,0,0);
			.text-introduc{
				font-size:14px;
				margin-bottom:1em;
			}
			.link{
				font-size:16px;
			}
		}
	}
}
}

@media screen and (max-width:768px){
.home{
	.banner{
		height:auto;
		.swiper-slide{
			background-image:url('') !important;
			.mobile-img{display:block;}
			.pc-title{
				width:60%;
				padding-top:60*@rpx;
			}
		}
		.swiper-pagination{
			right:20*@rpx;
			bottom:10*@rpx;
			.swiper-pagination-bullet{
				font-size:12px;
				margin:0 5*@rpx;
				&.swiper-pagination-bullet-active{
					font-size:20px;
				}
			}
		}
		.page-tip{
			display:none;
		}
	}
	//舰队介绍
	.fleet{
		padding-top:75*@rpx;
		padding-bottom:75*@rpx;
		.fleet-inner{
			padding-left:30*@rpx;
			padding-right:30*@rpx;
		}
		.video-box{
			width:100%;
			float:none;
		}
		.video-container{
			margin-bottom:0;
		}
		.video-player{
			margin-bottom:0;
			img{width:100%;}
		}
		.text-area{
			padding-left:0;
			padding-top:40*@rpx;
			float:none;
		}
	}
	//目的地
	.destinations{
		.destinations-list{
			@space:8*@rpx;
			margin-left:-@space;
			margin-right:-@space;
			margin-top:30*@rpx;
			margin-bottom:30*@rpx;
			.col-item{
				width:100%/2;
				padding:0 @space;
				a{
					margin-bottom:@space*2;
					img{
						width:100%;
					}
					&::after{
						font-size:18px;
					}
				}
			}
		}
	}
	//品牌
	.brand{
		padding-top:120*@rpx;
		padding-bottom:120*@rpx;
		.contact-info{
			width:100%;
			max-width:none;
			margin-bottom:60*@rpx;
			.logo{display:inline-block; width:50%; font-size:0; line-height:0;}
			.title{
				font-size:32px;
				span{font-size:28px;}
			}
			.phone{
				font-size:32px;
			}
			.content-btn{
				max-width:240px;
				font-size:18px;
				@media screen and (max-width: 480px){width:70%;}
			}
			.tip-text{
				font-size:14px;
			}
		}
		.swiper-box{
			display:none;
			.download-link{
				&::after{
					font-size:20px;
				}
			}
			.swiper-slide-active{
				.download-link{
					.translate3d(0,-10%,0);
					.box-shadow(10*@rpx 10*@rpx 0 #e4e4e4);
					&::before{opacity:1;}
					&::after{opacity:1;}
				}
			}
			.swiper-container{
				padding-top:32*@rpx;
				padding-bottom:60*@rpx;
			}
			.swiper-pagination{
				.swiper-pagination-bullet{
					width: 6px;
					height: 6px;
					&.swiper-pagination-bullet-active{
						background-color:@red;
					}
				}
			}
		}
	}
}
}


//短途体验
.peer{
	.swiper-container{
		width:100%;
		height:100%;
	}
	.swiper-slide{
		//width:100%/4;
		width:auto;
		//height:auto;
		font-size:0;
		line-height:0;
		background-color:@red;
		.transition(all,0.5s,ease,0s);
		.img-link{
			display:block;
			width:270px;
			height:100%;
			cursor:pointer;
			background:url(../images/example/home_demo_2.jpg) no-repeat 0 center;
			background-size:cover;
			img{display:none;}
			position:relative;
			.transition(all,0.5s,ease,0s);
			&::after{
				content:'';
				display:block;
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background-color:rgba(0, 0, 0, 0.35);
				.transition(all,0.5s,ease,0s);
			}
			.cover-title{
				opacity:1;
				padding-right:0.5em;
				padding-left:2em;
				width:100%;
				color:#fff;
				position:absolute;
				top:100px;
				left:0;
				z-index: 2;
				font-size:28px;
				line-height:1.2;
				font-weight:normal;
				.transition(all,0.5s,ease,0s);
				&::before{
					content:"\f0da";
					display:block;
					font-size:28px;
					font-family:'FontAwesome';
					position:absolute;
					top:0;
					left:1em;
				}
			}
		}
		.text-area{
			display:none;
			background-color:@red;
			color:#fff;
			height:100%;
			padding:60px 50px 0 50px;
			width:50%;
			position:relative;
			font-size:14px;
			line-height:14px;
			@media screen and (max-width:1680px){padding:50px 40px 0 40px;}
			@media screen and (max-width:1366px){padding:40px 30px 0 30px;}
			@media screen and (max-width:768px){max-width:none;}
			&::before{
				@size:25px;
				content:'';
				display:block;
				width:0;
				height:0;
				border:@size solid transparent;
				border-right-color:@red;
				position:absolute;
				top:100px;
				left:-@size*2;
				z-index:9;
			}
			.title{
				font-size:50px;
				line-height:1.2;
				font-weight:normal;
				@media screen and (max-width:1680px){font-size:46px;}
				@media screen and (max-width:1366px){font-size:40px;}
				@media screen and (max-width:1024px){font-size:36px;}
				@media screen and (max-width:768px){font-size:36px;}
				@media screen and (max-width:640px){font-size:24px;}
				a{
					color:rgba(255, 255, 255, 0.9);
					&:hover{
						text-decoration:none;
						color:rgba(255, 255, 255, 1);
					}
				}
			}
			.describe{
				font-size:16px;
				line-height:1.5;
				padding:2em 0;
				@media screen and (max-width:1024px){font-size:14px; padding:1.5em 0;}
				@media screen and (max-width:768px){padding:1em 0;}
			}
			.time-info{
				line-height:32px;
				font-size:20px;
				margin-bottom:0.5em;
				i{font-size:32px; padding-right:0.3em;}
				i,span{float:left;}
				@media screen and (max-width:1024px){font-size:18px; line-height:24px; i{font-size:24px;}}
			}
			.btn-group{
				padding-top:2em;
				@media screen and (max-width:1366px){padding-top:1.5em;}
				@media screen and (max-width:1024px){padding-top:1em;}
				.btn{
					border:0;
					.border-radius(3em);
					line-height:1;
					font-size:24px;
					padding:0.3em 1.5em;
					border:2px solid #fff;
					background-color:transparent;
					color:rgba(255, 255, 255, 0.9);
					i{font-size:24px;}
					&:not(:last-child){margin-right:0.3em;}
					&.active,&:hover{
						background-color:#fff;
						color:@red;
					}
					@media screen and (max-width:1024px){padding:0.3em 1.2em;}
				}
				@media screen and (max-width:1024px){
					.share-btn{padding:0.3em 1.2em;}
				}
			}
		}
		&.swiper-slide-active{
			width:750px;
			.img-link{
				width:375px;
				.cover-title{opacity:0;}
				&::after{background-color:rgba(0, 0, 0, 0);}
			}
			.text-area{display:block;}
		}
	}
	.peer-button-next,.peer-button-prev{
		position:absolute;
		cursor:pointer;
		bottom:0;
		right:0;
		padding:0.5em;
		font-size:30px;
		text-align:center;
		width:2em;
		line-height:1;
		background-color:rgba(255, 255, 255, 1);
		color:#000;
		z-index:9;
		&:hover{
			background-color:lighten(@red, 10%);
			color:#fff;
		}
	}
	.peer-button-prev{
		right:2em;
		background-color:rgba(0, 0, 0, 0.5);
		color:#fff;
	}
	@media screen and (max-width: 1024px){
		.swiper-slide{
			.img-link{width:240px;}
			&.swiper-slide-active{
				width:600px;
				.img-link{width:100%/2;}
				.text-area{display:block;}
			}
		}
	}
	@media screen and (max-width: 768px){
		.swiper-container{
			width:100%;
			height:auto;
		}
		.swiper-slide{
			width:100%;
			.img-link{
				width:50%;
				height:auto;
				.transition(none,0s,ease,0s);
				img{display:block;}
			}
			.text-area{
				display:block;
				width:100%/2;
				height:100%;
				padding:2em 1em 0 2em;
				&::before{
					@size:10px;
					border:@size solid transparent;
					border-right-color:@red;
					top:2em;
					left:-@size*2;
					z-index:9;
				}
				.title{
					font-size:20px;
					line-height:1.3;
					margin-bottom:1em;
					br{display:none;}
				}
				.describe{
					padding:0;
					margin:2em 0;
					font-size:14px;
					.text-overflow-lines(4,1.5em);
					br{display:none;}
				}
				.time-info{
					line-height:20px;
					font-size:14px;
					margin-bottom:0.5em;
					i{font-size:20px;}
				}
				.btn-group{
					padding-top:1.5em;
					margin-left:-4%;
					margin-right:-4%;
					.clearfix();
					.btn{
						width:100%/2-4%;
						//&:not(:last-child){margin-right:0;}
						margin:0 2%;
						float:left;
						display:block;
						font-size:18px;
						line-height:1;
						padding:0.3em 1em;
					}
				}
			}
			&.swiper-slide-active{
				.img-link{width:100%/2;}
				.text-area{display:block;}
			}
		}
		.peer-button-next,.peer-button-prev{
			font-size:20px;
			z-index:99;
		}
	}
}
//短途体验
.short-exp{
	position:relative;
	.short-exp-list{
		width:100%;
		height:100%;
		.short-exp-item{
			width:60%/5;
			height:100%;
			float:left;
			overflow:hidden;
			.transition(all,0.5s,ease,0s);
			&.short-exp-item-active{
				width:40%;
				.img-link{width:50%;}
				.text-area{width:50%; display:block;}
			}
		}
	}
	.img-link{
		width:100%;
		height:100%;
		background:url(../images/example/home_demo_2.jpg) no-repeat 0 center;
		background-size:auto 100%;
		img{display:none;}
		position:relative;
		.transition(all,0.5s,ease,0s);
		.cover-title{
			opacity:1;
			padding-right:0.5em;
			padding-left:2em;
			width:100%;
			color:#fff;
			position:absolute;
			top:100px;
			left:0;
			font-size:28px;
			line-height:1.2;
			font-weight:normal;
			.transition(all,0.5s,ease,0s);
			&::before{
				content:"\f0da";
				display:block;
				font-size:28px;
				font-family:'FontAwesome';
				position:absolute;
				top:0;
				left:1em;
			}
		}
	}
	.text-area{
		background-color:@red;
		color:#fff;
		display:none;
		height:100%;
		padding-top:100px;
		padding-left:50px;
		padding-right:50px;
		position:relative;
		&::before{
			@size:25px;
			content:'';
			display:block;
			width:0;
			height:0;
			border:@size solid transparent;
			border-right-color:@red;
			position:absolute;
			top:100px;
			left:-@size*2;
			z-index:9;
		}
		.title{
			font-size:50px;
			line-height:1.2;
			font-weight:normal;
			a{
				color:rgba(255, 255, 255, 0.9);
				&:hover{
					text-decoration:none;
					color:rgba(255, 255, 255, 1);
				}
			}
		}
		.describe{
			font-size:16px;
			line-height:1.5;
			padding:3em 0;
		}
		.time-info{
			line-height:32px;
			font-size:20px;
			margin-bottom:0.5em;
			i{font-size:32px; padding-right:0.3em;}
			i,span{float:left;}
		}
		.btn-group{
			padding-top:2em;
			.btn{
				border:0;
				.border-radius(3em);
				line-height:1;
				font-size:24px;
				padding:0.3em 1.5em;
				border:2px solid #fff;
				background-color:transparent;
				color:rgba(255, 255, 255, 0.9);
				i{font-size:24px;}
				&:not(:last-child){margin-right:0.3em;}
				&:hover{
					background-color:#fff;
					color:@red;
				}
			}
		}
	}
	.shortExp-button-next,.shortExp-button-prev{
		position:absolute;
		cursor:pointer;
		bottom:0;
		right:0;
		padding:0.5em;
		font-size:30px;
		text-align:center;
		width:2em;
		line-height:1;
		background-color:rgba(255, 255, 255, 1);
		color:#000;
		z-index:9;
		&:hover{
			background-color:@red;
			color:#fff;
		}
	}
	.shortExp-button-prev{
		right:2em;
		background-color:rgba(0, 0, 0, 0.5);
		color:#fff;
	}
}
